<template>
  <Div>
    <Row style="background-color: #007cd3;position:fixed;top:70px;width: 100%;z-index:1001">
      <Col span="18">
        <Form class="" ref="formInline" :model="formInline" inline>
          
          <Form-item prop="area" class="whiteItem" style="margin:15px 0px 15px 0px" label="区域" :label-width="80"
                     clearable>
            <Select v-model="formInline.area" style="width:200px" clearable>
              <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <Form-item prop="deviceNo" class="whiteItem" style="margin:15px 0px 15px 0px;" label="客户"
                     :label-width="100">
            <Select v-model="formInline.deviceNo" style="width:200px" clearable filterable>
              <Option v-for="(option, index) in deviceNoList" :value="option.value" :key="option.value" :label="option.label">
              </Option>
            </Select>
          </Form-item>
          <Form-item prop="healthy" class="whiteItem" style="margin:15px 0px 15px 0px" label="项目"
                     :label-width="120">
            <Select v-model="formInline.healthy" style="width:200px" clearable>
              <Option v-for="item in healthyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>

          <Form-item style="margin:15px 0px 15px 10px">
            <Button type="primary" style="width: 100px" @click="getSignalPumpTruckInfo(formInline,'name1')">查询
            </Button>
          </Form-item>
        </Form>
      </Col>
      <Col span="6">
        <Button type="primary" style="margin:15px 0px 15px 10px;width: 100px"
                @click="fresh()">刷新
        </Button>
      </Col>
    </Row>
    <Row style="margin-top:140px;">
      <Col span="7">
        <Row style="background-color: #DBEEFA;height: 350px">
          <Col>
            <Row type="flex" justify="space-around" :gutter="96" style="margin-top: 5%;">
              <Col v-bind="grid">
                <div style="padding: 25px 35px;font-size: 20px;font-weight: bold;height: 80px;width:150px;">
                  {{ formInline.area ? formInline.area : '所有地区' }}
                </div>
              </Col>
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({},'name2')"
                     style="font-size:16px;background-color: #5b9bd5;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">客户总数</Row>
                  <Row align="middle" justify="center">{{ deviceNum }}</Row>
                </div>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" :gutter="96" style="margin-top: 0%;">
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({healthy:'正常'},'name2')"
                     style="font-size:16px;background-color: #ffd966;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">商机识别</Row>
                  <Row align="middle" justify="center">{{ normalNum }}</Row>
                </div>
              </Col>
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({healthy:'亚健康'},'name2')"
                     style="font-size:16px;background-color: #ffd966;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">项目/客户识别</Row>
                  <Row align="middle" justify="center">{{ subHealthNum }}</Row>
                </div>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" :gutter="96" style="margin-top: 5%">
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({healthy:'预报警'},'name2')"
                     style="font-size:16px;background-color: #ed7d31;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">商机进展</Row>
                  <Row align="middle" justify="center">{{ preAlarmNum }}</Row>
                </div>
              </Col>
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({healthy:'报警'},'name2')"
                     style="font-size:16px;background-color: #ed7d31;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">商务谈判</Row>
                  <Row align="middle" justify="center">{{ alarmNum }}</Row>
                </div>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" :gutter="96" style="margin-top: 5%">
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({healthy:'预报警'},'name2')"
                     style="font-size:16px;background-color: #70ad47;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">签订合同</Row>
                  <Row align="middle" justify="center">{{ preAlarmNum }}</Row>
                </div>
              </Col>
              <Col v-bind="grid">
                <div @click="getSignalPumpTruckInfo({healthy:'报警'},'name2')"
                     style="font-size:16px;background-color: #70ad47;height: 60px;width:150px;border-radius: 10px;color: #ffffff;padding-top: 10px;cursor: pointer;">
                  <Row align="middle" justify="center">赢单</Row>
                  <Row align="middle" justify="center">{{ alarmNum }}</Row>
                </div>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <Tabs v-model="tabName">
              <TabPane label="项目信息" name="name1" style="margin-top:-20px">
                <Row>
                  <Col push="1" span="10">
                    <br/>
                    <Row :gutter="16">
                      <Col class="col-height">
                        项目编号：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.deviceNo }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col>
                        风区：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.deviceType }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        海拔高度：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.year }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        所在地区：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.quality }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        项目容量：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.series }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        项目阶段：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.carNum }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        湿度：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.area }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        海上/陆上：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.healthy }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        客户：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.healthy }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        特殊环境：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.healthy }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        温度：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.healthy }}
                      </Col>
                    </Row>
                  </Col>
                  <Col span="12">

                  </Col>
                </Row>
              </TabPane>
              <TabPane label="项目清单" name="name2">
                <div style="margin-left: 2%">
                  <Button type="primary" style="width: 100px;" @click="exportCsvFile()">导出
                  </Button>
                </div>
                <div style="margin-left: 2%;margin-right: 2%">
                  <Table border :columns="tableColumns" :data="tableData" height="370"></Table>
                </div>
              </TabPane>
              <TabPane label="客户详情" name="name3" style="margin-top:-20px">
                <Row>
                  <Col push="1" span="10">
                    <br/>
                    <Row :gutter="16">
                      <Col class="col-height">
                        客户名称：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.deviceNo }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col>
                        项目概况和招标范围：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.deviceType }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        招标条件：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.year }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        投标人资格要求：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.quality }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        招标文件的获取：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.series }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        投标文件的递交：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.carNum }}
                      </Col>
                    </Row>
                    <Row :gutter="16">
                      <Col class="col-height">
                        投标流程：
                      </Col>
                      <Col class="col-height">
                        {{ oneTruckInfo.area }}
                      </Col>
                    </Row>
                    
                  </Col>
                  <Col span="12">

                  </Col>
                </Row>
              </TabPane>
              <TabPane label="产能情况" name="name4">
               <div style="margin-left: 2%">
                  <Button type="primary" style="width: 100px;" @click="exportCsvFile()">导出
                  </Button>
                </div>
                <div style="margin-left: 2%;margin-right: 2%">
                  <Table border :columns="factoryColumns" :data="tableData" height="370"></Table>
                </div>
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </Col>
      <Col span="17">
        <div class="map">
          <el-amap vid="myMap"
                   :amap-manager="aMapManager"
                   :zoom="zoom"
                   :resizeEnable="resizeEnable"
                   :scrollWheel="scrollWheel"
          >
          </el-amap>
        </div>
      </Col>
    </Row>


  </Div>
</template>

<script>
//高德地图组件
import {lazyAMapApiLoaderInstance} from 'vue-amap'
import {AMapManager} from 'vue-amap';

let aMapManager = new AMapManager() // 新建生成地图画布

export default {
  name: 'index',
  data() {
    let self = this;
    return {
      grid: {
        xl: 4,
        lg: 10,
        md: 10,
        sm: 20,
        xs: 20
      },
      aMap: '',
      aMapManager,
      center: {},
      zoom: 6,
      scrollWheel: true,
      resizeEnable: true,
      markList: [],
      areaList: [],
      deviceNoList: [],//车辆设备列表
      healthyList: [{value: '正常', label: '正常'}, {value: '亚健康', label: '亚健康'}, {
        value: '预报警',
        label: '预报警'
      }, {value: '报警', label: '报警'}],
      deviceNum: 0, //设备总数
      normalNum: 0, //正常设备数
      subHealthNum: 0,//亚健康设备数
      preAlarmNum: 0,//预警设备数
      alarmNum: 0,//报警设备数
      area: '',
      tabName: 'name1',
      formInline: {
        deviceNo: '',
        area: '',
        healthy: ''
      },
      oneTruckInfo: {
        deviceNo: '',
        deviceType: '',
        year: '',
        quality: '',
        area: '',
        series: '',
        carNum: '',
        healthy: ''
      },
      tableColumns: [   //表格头
/*
        {
          title: '设备编号',
          key: 'value1',
          align: 'center',
          className: 'row-head-style',
          render: (h, params) => { //下划线跳转损伤点趋势
            return h('span', {
              style: {
                cursor: 'pointer',
                'text-decoration': 'underline',
              },
              on: {
                click: () => {
                  let routeData = this.$router.resolve({
                    name: "multTruckTrend",
                    query: {deviceNo: params.row.value1}
                  });
                  window.open(routeData.href, '_blank');
                }
              }
            }, params.row.value1);
          }
        },
        */
        {
          title: '项目编号',
          key: 'value2',
          align: 'center',
          className: 'row-head-style'
        },
        {
          title: '客户',
          key: 'value3',
          align: 'center',
          className: 'row-head-style'
        },
        {
          title: '所在地区',
          key: 'value4',
          align: 'center',
          className: 'row-head-style'
        },
        {
          title: '项目容量',
          key: 'value5',
          align: 'center',
          className: 'row-head-style'
        },
        {
          title: '项目阶段',
          key: 'value5',
          align: 'center',
          className: 'row-head-style'
        }
      ],

      factoryColumns: [
        {
          title: '单段最大加工长度',
          key: 'value1',
          align: 'center',
          className: 'row-head-style'
        },{
          title: '单段最大加工重量',
          key: 'value2',
          align: 'center',
          className: 'row-head-style'
        },{
          title: '最大卷制预弯能力',
          key: 'value3',
          align: 'center',
          className: 'row-head-style'
        },{
          title: '最大加工直径',
          key: 'value4',
          align: 'center',
          className: 'row-head-style'
        },{
          title: '设计产能',
          key: 'value5',
          align: 'center',
          className: 'row-head-style'
        }        
      ],
      tableData: [], //表格数据
      armData: [],//臂架损伤点数据
      opts: {
        width: 250,     // 信息窗口宽度
        height: 100,    // 信息窗口高度
        title: '<div style=\\"padding:7px 0px 0px 0px;\\"><h4>设备信息</h4>'  // 信息窗口标题
      },
      loading: false,
      thingName: [],
      areaArr: [],
      MGeocoder:''
    }
  },

  mounted() {
    this.initMap();
    this.getCarList();
  },

  methods: {
    //初始化地图
    initMap() {
      let _this = this;
      lazyAMapApiLoaderInstance.load().then(() => {
        _this.aMap = aMapManager.getMap();
        _this.MGeocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });
        _this.getArea();
        _this.getAllPumpTruckInfo();
      })

    },
    //将坐标转化为地址
    geocoder(lng, lat ,thingName) {
      let _this = this;
      //坐标点
      let lnglatXY = new AMap.LngLat(lng, lat);
      //返回地址描述
      //返回地理编码结果
      this.MGeocoder.getAddress(lnglatXY, function (status, result) {
        if (status === 'complete' && result.regeocode) {
          let address = result.regeocode.addressComponent.province;
          if (_this.areaArr.indexOf(address) == -1) {
            _this.areaList.push({value: address, label: address})
          }
          _this.areaArr.push(address);
          if(!thingName){
            console.log('空');
          }
          _this.thingName.push(thingName);
        } else {
          console.log('根据经纬度查询地址失败');
        }
      });
    },

    //获取区域列表
    getArea() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/getAllArea',
          data: {}
        }).then(res => {
          let resultData = res.data.array;
          _this.thingName = [];
          _this.areaArr = [];
          for (let i = 0; i < resultData.length; i++) {
            //坐标转地址
            if(resultData[i].location){
              _this.geocoder(resultData[i].location.longitude, resultData[i].location.latitude,resultData[i].thingName);
            }
          }
          setTimeout(function (){
            _this.updateArea(_this.thingName, _this.areaArr);
          },3000)
        }).catch(res => {
          console.log('fail');
        })
      })
    },

    //更新设备的area
    updateArea(thingName, area) {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/updateArea',
          data: {thingName: {array:thingName}, area: {array:area}}
        }).then(res => {
          console.log(res);
        }).catch(res => {
          console.log(res);
        })
      })
    },

    //获取所有车辆列表
    getCarList() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/getPumpTruckInfo',
          data: {}
        }).then(res => {
          //获取查询的泵车的坐标
          let resultData = res.data.rows;
          _this.deviceNoList = [];
          for (let i = 0; i < resultData.length; i++) {
            _this.deviceNoList.push({label: resultData[i].device_id, value: resultData[i].device_id});
          }
        }).catch(res => {
          console.log(res);
        })
      })
    },


    // 显示地图上的标记点
    getPoints(position, deviceNo, healthy) {
      let _this = this;
      let point = new AMap.LngLat(position.lng, position.lat);
      let iconSrc = require('../../assets/sany-image/markerImage.png');
      if (healthy == '正常') {
        iconSrc = require('../../assets/sany-image/green.png');
      }
      if (healthy == '亚健康') {
        iconSrc = require('../../assets/sany-image/yellow.png');
      }
      if (healthy == '预报警') {
        iconSrc = require('../../assets/sany-image/orange.png');
      }
      if (healthy == '报警') {
        iconSrc = require('../../assets/sany-image/red.png');
      }
      new AMap.Marker({
        icon: iconSrc,
        map: this.aMap,//放置点标记的地图
        position: point,
        offset: new AMap.Pixel(-13, -5) //图片位置偏移量
      }).on('click', function () {
        let infoWindow = new AMap.InfoWindow({
          closeWhenClickMap: true,
          content: _this.opts.title + '<br/><span>设备编号：</span><span>' + deviceNo + '</span><br/><span>健康状态：</span><span>' + healthy + '</span>'  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindow.open(_this.aMap, point);
        //切换到表格tab页
        _this.tabName = 'name1';
        //显示选中的设备的信息
        _this.clickMarker(deviceNo)
      })

    },

    //查询所有泵车的坐标列表
    getAllPumpTruckInfo() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/getPumpTruckInfo',
          data: {}
        }).then(res => {
          //获取所有泵车的坐标
          let resultData = res.data.rows;
          //获取各个状态的泵车的数量
          _this.getNumberPumpTruck(resultData);
          //默认中心点
          _this.center.lat = resultData[0].location.latitude;
          _this.center.lng = resultData[0].location.longitude;
          //通过坐标点获取地址
          _this.geocoder(_this.center.lng, _this.center.lat);
          let point = new AMap.LngLat(_this.center.lng, _this.center.lat);
          _this.aMap.setZoomAndCenter(_this.zoom, point);

          //将第一辆车作为默认显示的车辆信息
          if (resultData.length > 0) {
            _this.oneTruckInfo.deviceNo = resultData[0].device_id;
            _this.oneTruckInfo.deviceType = resultData[0].type;
            _this.oneTruckInfo.year = resultData[0].year;
            _this.oneTruckInfo.quality = resultData[0].quality;
            _this.oneTruckInfo.area = resultData[0].area;
            _this.oneTruckInfo.series = resultData[0].series;
            _this.oneTruckInfo.carNum = resultData[0].car_num;
            _this.oneTruckInfo.healthy = resultData[0].healthy_state;
            //设备臂架损伤点列表
            let json = {};
            _this.armData = [];
            for (let p in resultData[0]) {
              if (p.indexOf("stress_point") != -1) {
                //臂架损伤点数据
                let value = resultData[0][p];
                json["value" + p.substring(12, p.length)] = resultData[0][p] == 0 ? 0 : value.toExponential(2);
              }
            }
            _this.armData.push(json);

            //先清空表格数据
            _this.tableData = [];
            _this.aMap.clearMap();

            for (let i = 0; i < resultData.length; i++) {
              //添加地图上泵车标记点
              _this.getPoints({
                lng: resultData[i].location.longitude,
                lat: resultData[i].location.latitude
              }, resultData[i].device_id, resultData[i].healthy_state)
              //表格数据
              _this.tableData.push({
                value1: resultData[i].device_id,
                value2: resultData[i].type,
                value3: resultData[i].quality,
                value4: resultData[i].area,
                value5: resultData[i].healthy_state
              })
            }
          } else {
            //清楚基本信息
            _this.oneTruckInfo = {};
            //先清空表格数据
            _this.tableData = [];
            //清空地图覆盖物
            _this.aMap.clearMap();
            //清空臂架损伤点信息
            _this.armData = [];
          }

          console.log('success');
        }).catch(res => {
          console.log(res);
        })
      })
    },

    //根据查询条件查询泵车的信息
    getSignalPumpTruckInfo(params, tableName) {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/getPumpTruckInfo',
          data: params
        }).then(res => {
          //切换到表格tab页
          _this.tabName = tableName;
          //获取查询的泵车的坐标
          let resultData = res.data.rows;

          if (resultData.length > 0) {
            let lat = resultData[0].location.latitude;
            let lng = resultData[0].location.longitude;
            let point = new AMap.LngLat(lng, lat)

            _this.oneTruckInfo.deviceNo = resultData[0].device_id;
            _this.oneTruckInfo.deviceType = resultData[0].type;
            _this.oneTruckInfo.year = resultData[0].year;
            _this.oneTruckInfo.quality = resultData[0].quality;
            _this.oneTruckInfo.area = resultData[0].area;
            _this.oneTruckInfo.series = resultData[0].series;
            _this.oneTruckInfo.carNum = resultData[0].car_num;
            _this.oneTruckInfo.healthy = resultData[0].healthy_state;
            //设备臂架损伤点列表
            let json = {};
            _this.armData = [];
            for (let p in resultData[0]) {
              if (p.indexOf("stress_point") != -1) {
                //臂架损伤点数据
                json["value" + p.substring(12, p.length)] = resultData[0][p];
              }
            }
            _this.armData.push(json)
            //先清空表格数据
            _this.tableData = [];
            //清空地图覆盖物
            _this.aMap.clearMap();
            for (let i = 0; i < resultData.length; i++) {
              //绘制地图标记点
              _this.getPoints({
                lng: resultData[i].location.longitude,
                lat: resultData[i].location.latitude
              }, resultData[i].device_id, resultData[i].healthy_state)
              //表格数据
              _this.tableData.push({
                value1: resultData[i].device_id,
                value2: resultData[i].type,
                value3: resultData[i].quality,
                value4: resultData[i].area,
                value5: resultData[i].healthy_state
              })
            }

            //将地图中心位置锁定到泵车位置
            let infoWindow = new AMap.InfoWindow({
              closeWhenClickMap: true,
              content: _this.opts.title + '<br/><span>设备编号：</span><span>' + resultData[0].device_id + '</span><br/><span>健康状态：</span><span>' + resultData[0].healthy_state + '</span>'  //使用默认信息窗体框样式，显示信息内容
            });
            infoWindow.open(_this.aMap, point);
            _this.aMap.setCenter(point);
          } else {
            //清楚基本信息
            _this.oneTruckInfo = {};
            //先清空表格数据
            _this.tableData = [];
            //清空地图覆盖物
            _this.aMap.clearMap();
            //清空臂架损伤点信息
            _this.armData = [];
          }
          console.log('success');
        }).catch(res => {
          console.log(res);
        })
      })
    },

    //点击地图标记
    clickMarker(deviceNo) {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/getPumpTruckInfo',
          data: {deviceNo: deviceNo}
        }).then(res => {
          //切换到表格tab页
          _this.tabName = 'name1';
          //获取查询的泵车的坐标
          let resultData = res.data.rows;

          if (resultData.length > 0) {
            let lat = resultData[0].location.latitude;
            let lng = resultData[0].location.longitude;
            let point = new AMap.LngLat(lng, lat)
            //将地图中心位置锁定到泵车位置
            let infoWindow = new AMap.InfoWindow({
              closeWhenClickMap: true,
              content: _this.opts.title + '<br/><span>设备编号：</span><span>' + resultData[0].device_id + '</span><br/><span>健康状态：</span><span>' + resultData[0].healthy_state + '</span>'  //使用默认信息窗体框样式，显示信息内容
            });
            infoWindow.open(_this.aMap, point);
            _this.aMap.setCenter(point);
            _this.oneTruckInfo.deviceNo = resultData[0].device_id;
            _this.oneTruckInfo.deviceType = resultData[0].type;
            _this.oneTruckInfo.year = resultData[0].year;
            _this.oneTruckInfo.quality = resultData[0].quality;
            _this.oneTruckInfo.area = resultData[0].area;
            _this.oneTruckInfo.series = resultData[0].series;
            _this.oneTruckInfo.carNum = resultData[0].car_num;
            _this.oneTruckInfo.healthy = resultData[0].healthy_state;
            //设备臂架损伤点列表
            let json = {};
            for (let p in resultData[0]) {
              if (p.indexOf("stress_point") != -1) {
                //臂架损伤点数据
                json["value" + p.substring(12, p.length)] = resultData[0][p];
              }
            }
          }
          console.log('success');
        }).catch(res => {
          console.log(res);
        })
      })
    },

    //获取各个状态的泵车的数量
    getNumberPumpTruck(data) {
      let _this = this;
      _this.normalNum = 0;
      _this.subHealthNum = 0;
      _this.preAlarmNum = 0;
      _this.alarmNum = 0;
      _this.deviceNum = 0;
      for (let i = 0; i < data.length; i++) {
        if (data[i].healthy_state == '正常') {
          _this.normalNum++;
        }
        if (data[i].healthy_state == '亚健康') {
          _this.subHealthNum++;
        }
        if (data[i].healthy_state == '预报警') {
          _this.preAlarmNum++;
        }
        if (data[i].healthy_state == '报警') {
          _this.alarmNum++;
        }
        _this.deviceNum++;
      }
    },

    //刷新
    fresh() {
      this.formInline.deviceNo = '';
      this.formInline.area = '';
      this.formInline.healthy = '';
      //获取所有泵车信息，生成地图上的标记点
      this.getAllPumpTruckInfo();
      //将地图中心位置锁定到泵车位置
      //this.aMap.setZoomAndCenter(this.zoom, this.center);
      //关闭信息窗口
      //this.aMap.clearInfoWindow();
    },

    //导出csv
    exportCsvFile() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/exportCsvFile',
          data: {tableData: {data: _this.tableData}}
        }).then(res => {
          window.open(res.data.url)
          console.log('success');
        }).catch(res => {
          console.log(res);
        })
      })
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 820px;
}

.whiteItem >>> .ivu-form-item-label {
  color: #ffffff;
}

>>> .ivu-table th.row-head-style {
  background: #57a3f3;
  color: #fff;
}

.ivu-btn-primary {
  background-color: #F57F31;
}

/deep/ .amap-copyright {
  display: none !important;
}

/deep/ .amap-logo {
  display: none !important;
}

.col-height {
  height: 40px;
}
</style>
